<template>
  <div class="labelConfig">


    <div class="left-bar">
      <div class="search-container" v-role="'A040301002'">
        <el-input
          placeholder="标签"
          :prefix-icon="Search"
          style="width: 207px; margin-right: 24px"
          clearable
        />
        <el-button @click="" type="primary">查询</el-button>
      </div>
      <div class="label-container">
        <div class="add-text" @click="create" ><i class="iconfont icon-xinjian1"></i>新增标签</div>
        <div class="label-list">
          <div
            v-for="(item, index) in labelList"
            :key="index"
            :class=" item.isActive ? 'item active' : 'item' "
            @click="selectLabel(item, index)"
            
          >
            <div class="name" v-role="`item.permCode`">{{ item.name }}</div>
            <div class="icon-container" @click="editLabel(item, index)" >
              <i class="iconfont icon-biaozhumokuai"></i>
            </div>
          </div>
        </div>
      </div>
    </div>


    <div class="right-content">


      <div class="title-container">
        <span class="title">{{ currentLabelInfo.name }}列表</span>
        <div class="search-container">
          <el-input
            :placeholder="`${currentLabelInfo.name}名称`"
            :prefix-icon="Search"
            style="width: 272px; margin-right: 24px"
            clearable
          />
          <el-button @click="tableItemSearch" type="primary">查询</el-button>
          <el-button @click="tableItemClick('新建')" type="primary" :icon="Plus">新建</el-button>
        </div>
      </div>


      <el-table
        :data="tableList"
        style="width: 100%"
        stripe
        class="define-el-table"
      >
        <el-table-column type="index" label="序号" width="240" />
        <el-table-column label="编码" >
          <template #default="scope">
            <span>{{ scope.row.value }}</span>
          </template>
        </el-table-column>
        
        <el-table-column label="名称" >
          <template #default="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          width="320">
          <template #default="scope">
            <el-button @click="tableItemClick('编辑', scope.row, scope.$index)" type="text">编辑</el-button>
            
          </template>
        </el-table-column>
      </el-table>
      <div
        class="el-pagination-container"
        style="display: flex; justify-content: flex-end"
      >
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100, 500]"
          layout="prev, pager, next, sizes"
          :total="2"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 新建或编辑标签 -->
    <el-dialog
      v-model="createVisible"
      :title="`${labelType}标签`"
      width="440px"
      class="define-el-dialog"
    >
      <div class="content">
        <el-form :model="labelModel" label-width="68px">
          <el-form-item label="标签名称">
            <el-input v-model="labelModel.name" placeholder="请输入" @change="changeLabelName" />
          </el-form-item>
          <el-form-item label="编码">
            <el-input v-model="labelModel.value" disabled />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelLabel">取消</el-button>
          <el-button type="primary" @click="confirmLabel">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>


    <!-- 表格 新建或编辑标签 -->
    <el-dialog
      v-model="tableItemVisible"
      :title="`${tableItemType}${(labelList.find(item=> item.isActive) || {}).name}`"
      width="440px"
      class="define-el-dialog"
    >
      <div class="content">
        <el-form :model="tableModel" label-width="78px">
          <el-form-item label="名称">
            <el-input v-model="tableModel.name" placeholder="请输入" @change="changeTableItemName" />
          </el-form-item>
          <el-form-item label="编码">
            <el-input v-model="tableModel.value" disabled />
          </el-form-item>

          <el-form-item label="窗宽*窗位" v-show="(labelList.find(item=> item.isActive) || {}).name ===  '窗宽窗位'">
            <el-row>
              <el-col :span="11">
                <el-input v-model="tableModel.窗宽" />
              </el-col>
              <el-col :span="2">
                <span style="padding-left:5px"> * </span>
              </el-col>
              <el-col :span="11">
                <el-input v-model="tableModel.窗位" />
              </el-col>
            </el-row>
          </el-form-item>

          <el-form-item label="版本" v-show="(labelList.find(item=> item.isActive) || {}).name ===  '算法模型版本'">
            <el-input v-model="tableModel.版本" />
          </el-form-item>

          
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelTableItem">取消</el-button>
          <el-button type="primary" @click="confirmTableItem">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>


  </div>
</template>

<script lang="ts" setup>
//@ts-noCheck
import { ref, reactive, onMounted, watch } from 'vue';
  // import SysNotice from '@/components/sys-notice/index.vue';
  import NavBar from '@/components/navbar/index.vue';
  import { useAppStore, useUserStore } from '@/store';
  import ill from '@/assets/images/ill.png';
  import { Warning, Plus, Search, Delete } from '@element-plus/icons-vue';
  import { formatDateTime } from '@/utils/date';
  import NewTaskList from '@/views/doctor/components/NewTaskList.vue';
  import {
    taskSeriesSearch,
    userTaskSearch,
  } from '@/api/doctor/doctor';
  import { 
    TaskSeriesSearchList,
    TaskSeriesSearchModel,
    UserTaskSearchList,
    UserTaskSearchModel,
  } from '@/api/doctor/doctor.d';

  const getNumber = (list) => {
    const len = list.length;
    if( len == 0 ) return "A001";
    if( len > 0 ) {
      const lastNumber =  labelList.value[len-1].value;
      return length > 9 ? "A0" + (len+1) : "A00" + (len+1);
    }
  }

  const currentLabelInfo = ref({
    name: "",
  })
  const labelList = ref([
    { name: "科室", value: "A001",  isActive: true, permCode: 'A040401000'},
    { name: "任务标签", value: "A002",  isActive: false, permCode: 'A040402000'},
    { name: "任务目标", value: "A003",  isActive: false, permCode: 'A040403000'},
    { name: "任务用途", value: "A004",  isActive: false, permCode: 'A040404000'},
    { name: "废片原因", value: "A005",  isActive: false, permCode: 'A040405000'},
    { name: "窗宽窗位", value: "A006",  isActive: false, permCode: 'A040406000'},
    { name: "算法模型版本", value: "A007",  isActive: false, permCode: 'A040406000'},
  ]);

  onMounted(()=>{
    const item = labelList.value.find(item=> item.isActive);
    currentLabelInfo.value.name = item?.name;
  })
  watch(labelList, ()=> {
    const item = labelList.value.find(item=> item.isActive);
    currentLabelInfo.value.name = item?.name;
  }, {
    deep: true
  })
  /**
    新建或编辑标签
  */
  const labelType = ref("");
  const createVisible = ref(false);

  const selectLabel = (item, index) => {
    labelList.value.forEach(item=> item.isActive  = false);
    labelList.value[index].isActive = true;
    tableList.value = [];
  }

  const editLabel = (item, index)=> {
    labelModel.value = {
      name: item.name,
      value: item.value,
    }
    labelType.value = "编辑";
    createVisible.value = true;
  }
  const create = ()=> {
    labelType.value = "新建";
    createVisible.value = true;
  }
  
  const colseVisible = ()=> {
    createVisible.value = false;
  }

  
  const labelModel = ref({
    name: "",
    value: "",
  });

  const changeLabelName = ()=> {
    if( labelType.value  === '新建' ){
      labelModel.value.value = getNumber(labelList.value);
    }
  }
  const cancelLabel = ()=> {
    colseVisible();
    clearLableForm();
  }
  const confirmLabel = ()=> {
    colseVisible();
    const index = labelList.value.findIndex(item=> item.value === labelModel.value.value);
    if( index > -1 ){
      labelList.value[index] = JSON.parse(JSON.stringify(labelModel.value));
    } else {
      labelList.value.push(JSON.parse(JSON.stringify(labelModel.value)));
    }
    clearLableForm();
  }
  const clearLableForm = ()=> {
    labelModel.value = {
      name: "",
      value: "",
    }
  }
  const lesionsGroupList = ref([
    { name: "", 编码: ""}
  ]);
  const plus = (index)=> {
    lesionsGroupList.value.push(
      { name: "", 编码: ""}
    );
  }
  const del = (index)=> {
    lesionsGroupList.value.splice(index, 1)
  }


  /**
   * 表格
   */
  const tableItemVisible = ref(false);
  const tableItemType = ref("");
  const tableModel = reactive({
    name: "",
    value: "",
  })
  const changeTableItemName = ()=> {
    if( tableItemType.value === '新建' ){
      tableModel.value = getNumber(tableList.value);
    }
  }

  const cancelTableItem = ()=> {
    tableItemVisible.value = false;
  }
  const confirmTableItem = ()=> {
    const item = {
      name: tableModel.name,
      value: tableModel.value,
    };
    if( tableItemType.value === '新建' ){
      tableList.value.push(item);
    } else {
      const index = tableList.value.findIndex(item=> item.value == tableModel.value);
      tableList.value[index] = item;
    }
    tableItemVisible.value = false;
    clearTableModel();
  }
  const tableList = ref([]);

  const tableItemSearch = ()=> {

  }
  const tableItemClick = (type, item, index)=> {
    tableItemType.value = type;
    tableItemVisible.value = true;
    if( item ){
      tableModel.name = item.name;
      tableModel.value = item.value;
    }
  }
  const clearTableModel = ()=> {
    tableModel.name = "";
    tableModel.value = "";
  }

  /**
   * 分页
   */
  const currentPage = ref(1);
  const pageSize = ref(10);
  const handleSizeChange = () => {};
  const handleCurrentChange = () => {};


  


</script>


<style lang="less">
.labelConfig{
  width: ~'calc(100% - 40px)';
  height: 100vh;
  background-color: #fff;
  margin: 20px;
  display: flex;
  .left-bar{
    width: 320px;
    padding: 20px;
    border-right: 1px solid #E8E8E8;
    border-radius: 2px;
    .search-container{
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
    .add-text{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      border: 1px dashed #D9D9D9;
      border-radius: 2px; 
      cursor: pointer;   
      font-size: 14px;
      line-height: 18px;
      color: #666666;   
      margin-bottom: 8px;
      .iconfont{
        margin-right: 4px;
      }
    }
    .label-list{
      cursor: pointer;
      .item{
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 12px;
        margin-bottom: 8px;
        
        .name{
          font-style: normal;
          font-weight: 400;
          font-size: 14px;
          color: #333333;
        }
        &.active{
          background-color: #ECF4F5;
          .name{
            color: #448E97;
          }
        }
        &:hover{
          .icon-container{
            display: flex;
          }
        }
        .icon-container{
          width: 48px;
          height: 100%;
          display: none;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          .iconfont{
            color: #448E97;
          }
        }
        
      }
    }
  }


  .right-content{
    background-color: #fff;
    padding: 20px;
    flex: 1;
    .title-container{
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 14px;
      .title{
        font-weight: 700;
        font-size: 16px;
        line-height: 21px;
        color: #333333;
      }
    }
  }
  
}



.define-el-dialog{
  .content{
    padding: 28px 57px 28px 28px;
    .lesions-group-container{
      padding: 0 0 0 24px;
      .icon-handle{
        display: flex;
        justify-content: flex-end;
        align-items: center;
        &>div{
          width: 32px;
          height: 32px;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
        }
        .el-icon{
          color: #448E97;
          font-size: 16px;
        }
      }
    }
  }      
}
</style>